<template>
  <div id="fireManagement">
    <div style="height: 100%;">
      <div class="trees">
        <div class="tree_title">
          <h3 class="tree_title_h3">机构列表</h3>
        </div>
        <div class="tree_body">
          <Tree :data="baseData" @on-select-change="clickTree"></Tree>
        </div>
      </div>
      <div class="body_right">
        <div class="header-right">
          车辆状态管理
        </div>
        <div class="btn_group">
          <Select clearable  v-model="truckTypeSearch" filterable size="small" placeholder="车辆类型" style="width: 15rem;">
            <Option  v-for="item in truckTypeData" :value="item.value" :key="item.value">{{item.value}}</Option>
          </Select>
          <Button type="primary" icon="ios-search" size="small"  @click="search">查询</Button>
         <!-- <Button @click="modal5 = true" type="ghost" icon="ios-plus-empty" size="small" style="float:right;">新增</Button>-->
        </div>
        <div class="tableWidth">
          <Table border :columns="columns7" :data="data6" stripe></Table>
        </div>
        <!--车辆状态管理表-->
        <Modal v-model="modal5" title="车辆状态信息" width="800" :closable="false" :mask-closable="false">
          <Form action="post" ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="90">
            <Row>
              <Col span="12">
              <Form-item label="车辆名称" prop="truckName" >
                <Input v-model="formValidate.truckName" disabled></Input>
              </Form-item>
              </Col>
              <Col span="12">
              <Form-item label="车辆状态" prop="statusName">
                <Select v-model="formValidate.statusName" @on-change="statusChange">
                  <Option v-for="item in statusData" :value="item.value" :key="item.value">{{item.value}}</Option>
                </Select>
              </Form-item>
              </Col>
              <Col span="12">
              <Form-item label="填写人" prop="keyboarder">
                <Input v-model="formValidate.keyboarder" placeholder="请输入"></Input>
              </Form-item>
              </Col>
            </Row>
            <Form-item label="描述" prop="description">
                <Input type="textarea" v-model="formValidate.description" placeholder="请输入...(200字以内)"></Input>
            </Form-item>
          </Form>
          <div slot="footer">
            <Button type="ghost" size="small" @click="cancelFrom">取消</Button>
            <Button type="primary" size="small" @click="handleSubmit('formValidate')">提交</Button>
          </div>
        </Modal>
        <!-- 分页显示-->
        <div class="page_container">
          <Page :current="currentPage" :total="totalCount" size="small" simple  class="page_btn" @on-change="changePage"></Page>
          <P class="page_text">共{{totalCount}}条</P>
        </div>
        <!--状态记录表-->
        <Modal v-model="statusRecords" title="车辆状态记录" width="800" :closable="false" :mask-closable="false">
          <div class="tableWidth">
            <Table border :columns="statusRecordsTable" :data="statusRecordsData" stripe></Table>
          </div>
          <div class="page_container">
            <Page :current="currentPage1" :total="totalCount1" size="small" simple  class="page_btn" @on-change="changePage1"></Page>
            <P class="page_text">共{{totalCount1}}条</P>
          </div>
          <div slot="footer">
            <Button type="primary" size="small" @click="cancelFromState">关闭</Button>
          </div>
        </Modal>
      </div>
    </div>
  </div>
</template>
<script type="text/javascript">
  var ezjsUtil = Vue.ezjsUtil;
  var apiConstants = ezjsUtil.constants.api;
  export default {
    data () {
      const validateStartTime = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择日期'));
        }else {
          callback();
        }
      };
      const validateEndtTime = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请选择日期'));
        }else {
          callback();
        }
      };
      return {
        carStateId:'',//车辆状态主表ID
        currentPage:1, //主页面当前页
        totalCount:0,  //主页面总条数
        currentPage1:1, //状态记录表当前页
        totalCount1:0,  //状态记录表总条数
        truckTypeSearch:'',
        truckTypeData:[],
        statusData:[],
        /*  表头开始*/
        columns7: [
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '车辆名称',
            key: 'truckName',
            align: 'center'

          },
          {
            title: '车辆状态',
            key: 'truckStatusName',
            align: 'center'

          },
          {
            title: '更新时间',
            key: 'reviseTime',
            align: 'center',
/*            render: function(h, params){
              var newTime = new Date(params.row.reviseTime);
              var Y=newTime.getFullYear();
              var M=newTime.getMonth()+1;
              var D=newTime.getDate();
              var H=newTime.getHours();
              var m=newTime.getMinutes();
              var s=newTime.getSeconds();
              var time=Y+"-"+M+"-"+D+" "+H+":"+m+":"+s;
              return h('div', time);
            }*/
          },
          {
            title:'车辆类型',
            key:'truckTypeName',
            align:'center'
          },
          {
            title: '更新状态',
            key: 'action',
            align: 'center',
            width:150,
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                      this.carInfoEdit(params.row)
                    }
                  }
                }, '编辑'),
              ]);
            }
          },
          {
            title: '状态记录',
            key: 'action',
            align: 'center',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  on: {
                    click: () => {
                     /* this.show(params.index)*/
                      this.carStateId=params.row.id;
                      this.formValidate.fireTruckInformationId = this.carStateId;
                      this.fireTruckStatus_detail();
                      this.statusRecords=true;


                    }
                  }
                }, '查看')
              ]);
            }
          },
        ],
        statusRecordsTable:[
          {
            title:'状态',
            key:'statusName',
            align:'center'
          },
          {
            title:'更新时间',
            key:'modifyTime',
            align:'center',
            render: function(h, params){
              var newTime = new Date(params.row.modifyTime);
              var Y=newTime.getFullYear();
              var M=newTime.getMonth()+1;
              var D=newTime.getDate();
              var H=newTime.getHours();
              var m=newTime.getMinutes();
              var s=newTime.getSeconds();
              var time=Y+"-"+M+"-"+D+" "+H+":"+m+":"+s;
              return h('div', time);
            }
          },
          {
            title:'描述',
            key:'description',
            align:'center'
          },
          {
            title:'填写人',
            key:'keyboarder',
            align:'center'
          },
        ],
        /*表头结束*/
        /* 表格数据显示区域*/
        data6: [


        ],
        statusRecordsData:[

        ],
        /* 树结构*/
        baseData: [

        ],
        /* 全局变量*/
        modal5: false,
        statusRecords:false,
        formValidate: { //表单验证
          truckName:'',
          description:'',
          fireTruckInformationId:'',
          keyboarder:'',
          statusId:'',
          statusName:'',
          endTime:'',
          startTime:'',
          departmentCode:'',
        },
        ruleValidate: {
          startTime: [
            { required: true, validator: validateStartTime, trigger: 'change' }
          ],
          endTime: [
            { required: true, validator: validateEndtTime, trigger: 'change' }
          ],
          truckType: [
            { required: true, message: '车辆类型不能为空', trigger: 'blur' },
          ],
          truckModel: [
            { required: true, message: '车辆型号不能为空', trigger: 'blur' }
          ],
          attendTime: [
            { required: true, message: '日期时间不能为空', trigger: 'change' }
          ],
          purpose: [
            { type:'string',max:200, message: '输入200字以内', trigger: 'change' }
          ],
        }
      }
    },
    /* 在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。*/
    created(){
      this.fireTruckInformation_flipList();
      this.dictionary_flipList_truckStatus();
      this.dictionary_flipList();
      this.organization_flipList();
      this.fireTruckStatus_detail();
    },
    /*在挂载开始之前被调用：相关的 render 函数首次被调用。*/
    mounted:function(){

    },
    methods: {
      carInfoEdit(value){ //修改(新增状态记录表数据)
        this.formValidate.truckName=value.truckName;
        this.formValidate.fireTruckInformationId=value.id;
        this.modal5=true;
      },
      statusChange(val){
        for(var i=0;i<this.statusData.length;i++){
          if(val==this.statusData[i].value){
            this.formValidate.statusId=this.statusData[i].id;
          }
        }
      },
      showStartTime(data){  //改变时，将日期值赋值
        this.formValidate.startTime=data;
      },
      showEndTime(data){  //改变时，将日期值赋值
        this.formValidate.endTime=data;
      },
      show(index){
        this.statusRecords=true;
      },
      closeModal(){
        this.statusRecords=false;
      },
      cancelFrom(){  //单击取消重置并关闭模态框
        this.handleReset('formValidate');
        this.modal5=false;
      },
      cancelFromState(){  //单击取消重置并关闭模态框
        this.statusRecords=false;
        this.currentPage1 = 1;

      },
     /* 页面主页分页*/
      changePage(page){     //分页展示
        this.currentPage=page;
        this.fireTruckInformation_flipList();
      },
     /* 弹框状态记录表分页*/
      changePage1(page1){     //分页展示
        this.currentPage1=page1;
        this.fireTruckStatus_detail();
      },
      /*******************状态记录显示表*************/
      fireTruckStatus_detail(){ //显示与查询接口
        var _this = this;
        ezjsUtil.request(apiConstants.fireTruckStatus_detail,
          {
            id:_this.carStateId,
            pageNo:_this.currentPage1,
          },
          function (err, data) {
            if (err) {
              return;
            }
            _this.statusRecordsData=data.listInfo;
            _this.totalCount1=data.flipInfo.totalCount;

          }
        )
      },
      /*****************状态记录表新增开始***********************/
      fireTruckStatus_edit(){ //新增状态记录
        var _this = this;
        ezjsUtil.request(apiConstants.fireTruckStatus_edit,
          {
            fireTruckInformationId:_this.formValidate.fireTruckInformationId,
            endTime:_this.formValidate.endTime,
            keyboarder:_this.formValidate.keyboarder,
            description:_this.formValidate.description,
            startTime:_this.formValidate.startTime,
            statusName:_this.formValidate.statusName,
            statusId:_this.formValidate.statusId,
          },
          function (err, data) {
            if (err) {
              return;
            }
            _this.fireTruckStatus_detail();
          }
        )
      },
      /*****************状态记录表新增结束***********************/
      /*****************主页面查询开始***********************/
      search(){ //查询
          this.currentPage=1;
        this.fireTruckInformation_flipList();  //调用显示接口
      },
      /*****************主页面查询结束***********************/
      handleSubmit (name) {  //表单验证
        this.$refs[name].validate((valid) => {
          if (valid) {
            this.fireTruckStatus_edit();
            this.$Message.success('提交成功!');
            this.modal5=false;
            this.handleReset('formValidate');
            this.fireTruckInformation_flipList();
          } else {
            this.$Message.error('表单验证失败!');
          }
        })
      },
      handleReset (name) {  //重置
        this.$refs[name].resetFields();
      },
     /* 主表内容显示*/
      fireTruckInformation_flipList(){ //显示与查询接口
        var _this = this;
        ezjsUtil.request(apiConstants.fireTruckInformation_flipList,
          {
            truckTypeName:_this.truckTypeSearch,
            pageNo:_this.currentPage,
            departmentCode: _this.formValidate.departmentCode,

          },
          function (err, data) {
            if (err) {
              return;
            }
            _this.data6=data.listInfo;
            _this.totalCount=data.flipInfo.totalCount;
          }
        )
      },
      /*组织机构数*/
      organization_flipList(){ //显示 查询
        var _this = this;
        ezjsUtil.request(apiConstants.organization_flipList,
          {          },
          function (err, data) {
            if (err) {
              return;
            }
            _this.baseData=data;
              _this.baseData[0].expand=true;
          }
        )
      },
      clickTree(value){
        if(value.length>0){
          this.formValidate.departmentCode=value[0].code;
          this.formValidate.departmentName=value[0].fullTitle;
        }else {
          this.formValidate.departmentCode='';
          this.formValidate.departmentName='';
        }
        this.search();
      },
      /*字典数据相关接口*/
      dictionary_flipList(){ //显示 查询
        var _this = this;
        ezjsUtil.request(apiConstants.dictionary_flipList,
          {
            key:"truckType",
          },
          function (err, data) {
            if (err) {
              return;
            }
            _this.truckTypeData=data;
          }
        )
      },
      dictionary_flipList_truckStatus(){ //显示 查询
        var _this = this;
        ezjsUtil.request(apiConstants.dictionary_flipList,
          {
            key:"truckStatus",
          },
          function (err, data) {
            if (err) {
              return;
            }
            _this.statusData=data;
          }
        )
      },
    }
  }
</script>
<style lang="less" scoped>
  #fireManagement{
    height: 100%;
    overflow: auto;
    padding:15px;
  .trees{
    width: 260px;
    height:100%;
    padding-bottom: 30px;
    float: left;
    border: 1px solid #d3d8e0;
    overflow: auto;
  .tree_title{
    height: 40px;
    border-bottom: 1px solid #d3d8e0;
  .tree_title_h3{
    line-height: 40px;
    text-align: center;
    font-size: 14px;
    color: #6e6d6d;
  }
  }
  .tree_body{
    padding-left: 8px;
  }
  }
  .body_right{
    margin-left: 280px;
    height: 100%;
    overflow: auto;
  .header-right{
    height:40px;
    border-bottom:1px solid #d3d8e0;
    font-size: 14px;
    color: #657180;
    line-height:40px;
    font-family:'微软雅黑';
  }
  .btn_group{
    width:100%;
    padding:1.5rem 0;
  }
  .tableWidth{
    width:100%;
  }
  }

  }
  .page_container{
    height: 30px;
    margin-top: 20px;
  .page_btn{
    float: right;
  }
  .page_text{
    float: right;
    line-height: 26px;
  }
  }
</style>
